<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>JavaScript Bs_Slider example 2</title>

<style>
  .sliderInput {
  	height:20;
    width:30;
  	font-family : Arial, Helvetica, sans-serif;
  	font-size : 12px;
  }
</style>

<script type="text/javascript" src="/_bsJavascript/lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="/_bsJavascript/lib/EventHandler.js"></script>
<script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="/_bsJavascript/components/slider/Bs_Slider.class.js"></script>

<script><!--
function init(){
  // - Slider 1 -----------------------------------------
  mySlider1 = new Bs_Slider();
  mySlider1.attachOnChange(bsSliderChange);
  mySlider1.width         = 81;
  mySlider1.height        = 27;
  mySlider1.minVal        = 0;
  mySlider1.maxVal        = 100;
  mySlider1.valueDefault  = 50;
  mySlider1.valueInterval = 1;
  mySlider1.setBackgroundImage('volume/bg.gif', 'no-repeat');
  mySlider1.setSliderIcon('volume/slider.gif', 9, 22);
  mySlider1.useInputField = 0;
  mySlider1.draw('sliderDiv1');
	
	
  // - Slider 2 -----------------------------------------
  mySlider2 = new Bs_Slider();
  mySlider2.attachOnChange(bsSliderChange);
  mySlider2.width         = 81;
  mySlider2.height        = 27;
  mySlider2.minVal        = 50;
  mySlider2.maxVal        = 100;
  mySlider2.valueDefault  = 74;
  mySlider2.valueInterval = 2;
  mySlider2.setBackgroundImage('volume/bg.gif', 'no-repeat');
  mySlider2.setSliderIcon('volume/slider.gif', 9, 22);
  mySlider2.useInputField = 0;
  mySlider2.colorbar = new Object();
  mySlider2.colorbar['color']           = 'red';
  mySlider2.colorbar['height']          = 3;
  mySlider2.colorbar['widthDifference'] = -2;
  mySlider2.colorbar['offsetLeft']      = 3;
  mySlider2.colorbar['offsetTop']       = 11;
  mySlider2.draw('sliderDiv2');
	
	
  // - Slider 3 -----------------------------------------
  mySlider3 = new Bs_Slider();
  mySlider3.attachOnChange(bsSliderChange);
	mySlider3.fieldName     = 'volume';
  mySlider3.width         = 49;
  mySlider3.height        = 15;
  mySlider3.minVal        = 5;
  mySlider3.maxVal        = 8;
  mySlider3.valueDefault  = 6;
  mySlider3.valueInterval = 0.1;
  mySlider3.setBackgroundImage('increase/bg.gif', 'no-repeat');
  mySlider3.setSliderIcon('increase/knob.gif', 10, 21);
  mySlider3.useInputField = 0;
  mySlider3.draw('sliderDiv3');
	
}

/**
* @param object sliderObj
* @param int val (the value)
*/
function bsSliderChange(sliderObj, val, newPos){ 
  document.test.attachedFieldValue.value = val;
}
// --></script>

</head>
<body bgColor="#D6D6CE" text="#3366aa" link="#0000ee" alink="#ff0000" vlink="#551a8b" onLoad="init();">

<h1>JavaScript Bs_Slider example 2</h1>

This is an example of the <a href="http://www.blueshoes.org/en/javascript/slider/" target="_blank">Slidebar Control</a>.
<br><br>


<ul>
	<li>Similar to example 1, using different styles.</li>
	<li>
		Slider 3 uses fallback code for old browsers. <br>
		Screenshot old browser:<br>
		<img src="./example2_screenshot1.gif" border="0" style="border:1px solid black;"><br>
		Screenshot new browser:<br>
		<img src="./example2_screenshot2.gif" border="0" style="border:1px solid black;"><br>
		Just put your fallback code inside the div tags. All innerHTML content will be replaced 
		if the slider renders.
	</li>
</ul>

<hr>
<br>

  <form  name="test" id="test" action="http://www.blueshoes.org/postDump.php" method="post">
    <table border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="200" valign="top">
					<b>Slider 1</b><br>
					<div id="sliderDiv1"></div>
				</td>
        <td width="200" valign="top">
					<b>Slider 2</b><br>
					<div id="sliderDiv2"></div>
				</td>
        <td width="200" valign="top">
					<b>Slider 3</b><br>
					<div id="sliderDiv3">
						<!-- all this will be replaced with the slider... if the browser supports it. -->
						Volume <input type="text" name="volume" value="0" maxlength="2" size="2"> (0-50)
					</div>
				</td>
      </tr>
      <tr>
        <td colspan="100%"><br><br><br><br>
          value: <input type="text" name="attachedFieldValue" value="" size="6" style="background:yellow;">
        </td>
      </tr>
    </table>
  	<br>
  	<input type="submit">
  </form>

</body></html>
